import React, { useEffect, memo } from 'react';
import { useDispatch } from "react-redux";
// import { useLocation } from 'react-router-dom';

import {
    getCategoryAction,
    getCategorySongsAction,
    changeCurrentCategoryAction
} from "./store/actionCreators";

import CJXSongsHeader from "./c-cpns/songs-header";
import CJXSongsList from './c-cpns/songs-list';
import {
    SongsWrapper
} from "./style"

export default memo(function CJXSongs(props) {
    console.log(props.location);
    const { state } = props.location;
    
    // redux
    const dispatch = useDispatch();

    if (state) {
        dispatch(changeCurrentCategoryAction(state.cat));
    }
    // const cat = useLocation().cat;
    // useEffect(() => {
    //     console.log(cat);
    //     dispatch(changeCurrentCategoryAction(cat));
    // }, [dispatch, cat]);

    // hooks
    useEffect(() => {
        dispatch(getCategoryAction());//分类列表
        dispatch(getCategorySongsAction(0));//分类下的歌手列表  0 表示 第一页
    }, [dispatch])

    return (
        <SongsWrapper className="wrap-v2">
            <CJXSongsHeader />
            <CJXSongsList />
        </SongsWrapper>
    )
})
